<template>
  <BasicModal v-bind="$attrs" @register="registerModal" :width="800" title="选择商品" @ok="handleSubmit" destroyOnClose>
    <!--定义表格-->
    <BasicTable @register="registerTable" :rowSelection="rowSelection" />
    <template #footer>
      <a-button @click="handleClose">关闭</a-button>
      <a-button type="primary" @click="handleSubmit">确认</a-button>
    </template>
  </BasicModal>
</template>

<script lang="ts" name="goodPop" setup>
  import { inject, ref } from 'vue';
  import { getPage } from '../sku.api';
  import { columns } from '../sku.data';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicColumn, BasicTable } from '/@/components/Table';

  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
    reload();
    clearSelection();
  });

  import { useListPage } from '/@/hooks/system/useListPage';
  /** useListPage 是整个框架的核心用于表格渲染，里边封装了很多公共方法；
   * 平台通过此封装，简化了代码，支持自定义扩展*/
  // 通过hook useListPage渲染表格（设置dataSource、columns、actionColumn等参数）
  const { tableContext } = useListPage({
    designScope: 'basic-table-skus',
    tableProps: {
      title: '商品列表',
      api: getPage,
      // rowkey: 'key',
      showTableSetting: false,
      rowSelection: { type: 'checkbox' },
      columns: columns,
      size: 'small',
      showActionColumn: false,
    },
  });
  // BasicTable绑定注册
  const [registerTable, { reload }, { rowSelection, selectedRows, selectedRowKeys }] = tableContext;

  // 清除选择的函数
  const clearSelection = () => {
    selectedRowKeys.value = [];
  };

  function handleSubmit(data) {
    if (selectedRows.value.length > 0) {
      insertData(selectedRows.value);
    }
    closeModal();
  }

  function handleClose() {
    closeModal();
  }
  // const modelValue = defineModel<string>();

  const insertData = inject('insertData');
</script>
